/*
 * @Author: your name
 * @Date: 2023-10-11 13:03:45
 * @LastEditTime: 2023-10-31 15:23:48
 * @LastEditors: Please set LastEditors
 * @Descripttion: In User Settings Edit
 * @FilePath: /bicycle-mobile-old/h5/src/pages/enterpriseInfo/index.jsx
 */
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import { useDispatch, useSelector } from 'dva';
import ReturnIndex from '../../components/returnIndex';
import InfoItem from '../../components/infoItem';
import copy from 'copy-to-clipboard';
import { Toast, Switch } from 'antd-mobile';
import unCheckedImg from '../../assets/info/unChecked.png';
import checkedImg from '../../assets/info/checked.png';
import { useForm } from 'react-hook-form';
import { useIntl } from 'umi';
import { getList } from '../../servers/service.js';

function Index () {
  const dispatch = useDispatch();
  const { likeExhibitorList, userInfo } = useSelector(({ index }) => index);
  const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
  } = useForm();
  const intl = useIntl();

  let [exhibitorInfo, setExhibitorInfo] = useState({})
  let [status, setStatus] = useState(false);
  let [radio, setRadio] = useState(1);
  let [isEdit, setIsEdit] = useState(false);
  let [focusIndex, setFocusIndex] = useState(1)
  let [companyEN, setCompanyEN] = useState(null)
  let [companyCN, setCompanyCN] = useState(null)

  let radioList = [
    { value: 1, label: '中文' },
    { value: 2, label: '英文' },
  ];

  function onSubmit (data) {
    dispatch({
      type: 'index/apiPostExhibitor',
      payload: {
        ...exhibitorInfo,
        ...data,
        id: exhibitorInfo.id,

      },
      callback: (status) => {
        if (status) {
          setIsEdit(false)
          let obj = {
            ...userInfo,
            exhibitor: {
              ...exhibitorInfo,
              ...data
            }

          }
          dispatch({
            type: 'index/setState',
            payload: {
              userInfo: obj
            },
          });
        }
      }
    })

  }


  const getTargetList = () => {
    getList(
      `static-page/page`, {
      id: userInfo?.exhibitor?.staticPageId
    }
    )
      .then(({ data }) => {
        setCompanyCN(data.content[0]?.content)
        // setValue('companyCN', data.content[0]?.content)
      })
      .finally(() => Toast.hide());
    getList(
      `static-page/page`, {
      id: userInfo?.exhibitor?.staticPageEnId
    }
    )
      .then(({ data }) => {
        setCompanyEN(data.content[0]?.content)
        // setValue('companyEN', data.content[0]?.content)
      })
      .finally(() => Toast.hide());
  };

  useEffect(() => {
    let info = userInfo?.exhibitor
    setExhibitorInfo(info)
    //获取企业介绍
    getTargetList()

    // console.log('userInfo----', info)
    if (info) {
      setValue('businessScope', info.businessScope)
      setValue('businessScopeEn', info.businessScopeEn)
      setValue('contact', info.contact)
      setValue('contactEn', info.contactEn)
      setValue('contactDuty', info.contactDuty)
      setValue('contactDutyEn', info.contactDutyEn)
      setValue('contactNumber', info.contactNumber)
      setValue('contactEmail', info.contactEmail)
      setValue('website', info.website)
      setValue('weixin', info.weixin)
      setValue('systemContact', info.systemContact)
      setValue('systemContactNumber', info.systemContactNumber)
    }
  }, [userInfo]);


  return (
    <div className={styles.page}>
      <ReturnIndex />
      <div className={styles.enterpriseInfo} >
        <div className={styles.infoCard}>
          {exhibitorInfo.properties && <img className={styles.infoLogo} src={exhibitorInfo.properties.logo} />}
          <div className={styles.infoContent}>
            <div className={styles.t1}>{radio === 1 ? exhibitorInfo.name : exhibitorInfo.nameEn}</div>
            <p className={styles.t2} style={{ marginTop: 12 }}>
              <span>ID：</span>{exhibitorInfo.venueId}
            </p>
            <p className={styles.t2}>
              <span>地址：</span>{radio === 1 ? exhibitorInfo.address : exhibitorInfo.addressEn}
            </p>
          </div>
        </div>
        {/* 查看模式 */}
        {!isEdit && <div className={`${styles.flexCol} ${styles.contentView}`}>
          <div className={styles.infoItem}>
            <div className={styles.title}>显示语言：</div>
            <div className={`${styles.content} ${styles.flewRow}`}>
              {radioList.map((item, index) => {
                return (
                  <div
                    className={styles.radioView}
                    key={index}
                    onClick={() => {
                      setRadio(item.value);
                    }}
                  >
                    <img
                      className={styles.text}
                      alt=""
                      src={radio === item.value ? checkedImg : unCheckedImg}
                    ></img>
                    <div className={styles.radioName}>{item.label}</div>
                  </div>
                );
              })}
            </div>
          </div>
          <InfoItem title="企业经营范围" content={radio === 1 ? exhibitorInfo.businessScope : exhibitorInfo.businessScopeEn} />
          <InfoItem title="企业联系人" content={radio === 1 ? exhibitorInfo.contact : exhibitorInfo.contactEn} />
          <InfoItem title="联系人职务" content={radio === 1 ? exhibitorInfo.contactDuty : exhibitorInfo.contactDutyEn} />
          <InfoItem title="联系人电话" content={exhibitorInfo.contactNumber} />
          <InfoItem title="联系邮箱" content={exhibitorInfo.contactEmail} />
          <InfoItem title="企业网址" content={exhibitorInfo.website} />
          <div className={styles.infoItem}>
            <div className={styles.title}>企业微信：</div>
            <div className={styles.content}>
              {exhibitorInfo.weixin || '-'}
            </div>
            <div
              className={styles.copyText}
              onClick={() => {
                let copyText = exhibitorInfo.weixin
                copy(copyText);
                Toast.info('复制成功');
              }}
            >
              复制URL
            </div>
          </div>
          <InfoItem title="系统联系人姓名" content={exhibitorInfo.systemContact} />
          <InfoItem title="系统联系人电话" content={exhibitorInfo.systemContactNumber} />
          <div className={styles.infoItem}>
            <div className={styles.title}>企业介绍：</div>
            <div className={styles.content} dangerouslySetInnerHTML={{ __html: radio === 1 ? companyCN : companyEN }}>
            </div>
          </div>
          <div className={styles.editBtn} onClick={() => {
            setIsEdit(true)
          }}>编辑</div>
        </div>}
        {/* 编辑模式 */}
        {isEdit && <div className={`${styles.flexCol} ${styles.contentView}`}>
          <div className={styles.infoItem}>
            <div className={styles.title}>显示语言：</div>
            <div className={`${styles.content} ${styles.flewRow}`}>
              {radioList.map((item, index) => {
                return (
                  <div
                    className={styles.radioView}
                    key={index}
                    onClick={() => {
                      setRadio(item.value);
                    }}
                  >
                    <img
                      className={styles.text}
                      alt=""
                      src={radio === item.value ? checkedImg : unCheckedImg}
                    ></img>
                    <div className={styles.radioName}>{item.label}</div>
                  </div>
                );
              })}
            </div>
          </div>

          <form className={styles.flexCol} onSubmit={handleSubmit(onSubmit)}>
            <div>
              <div className={styles.infoItem}>
                <label className={styles.title}>企业经营范围：</label>
                <div className={styles.itemInputBox}>
                  {radio === 1 && <input placeholder="在此处输入描述内容"  {...register('businessScope', { required: true })} />}
                  {radio === 2 && <input placeholder="在此处输入描述内容"  {...register('businessScopeEn', { required: true })} />}
                </div>
                {radio === 1 && errors.businessScope && <p>请输入企业经营范围</p>}
                {radio === 2 && errors.businessScopeEn && <p>请输入企业经营范围</p>}
              </div>
              <div className={styles.infoItem}>
                <label className={styles.title}>企业联系人：</label>
                <div className={styles.itemInputBox}>
                  {radio === 1 && <input placeholder="在此处输入企业联系人"  {...register('contact', { required: true })} />}
                  {radio === 2 && <input placeholder="在此处输入企业联系人"  {...register('contactEn', { required: true })} />}
                </div>
                {radio === 1 && errors.contact && <p>请输入企业联系人</p>}
                {radio === 2 && errors.contactEn && <p>请输入企业联系人</p>}
              </div>
              <div className={styles.infoItem}>
                <label className={styles.title}>联系人职务：</label>
                <div className={styles.itemInputBox}>
                  {radio === 1 && <input placeholder="在此处输入联系人职务"  {...register('contactDuty', { required: true })} />}
                  {radio === 2 && <input placeholder="在此处输入联系人职务"  {...register('contactDutyEn', { required: true })} />}
                </div>
                {radio === 1 && errors.contactDuty && <p>请输入联系人职务</p>}
                {radio === 2 && errors.contactDutyEn && <p>请输入联系人职务</p>}
              </div>
              <div className={styles.infoItem}>
                <label className={styles.title}>联系人电话：</label>
                <div className={styles.itemInputBox}>
                  <input placeholder="在此处输入联系人电话"  {...register('contactNumber', { required: true })} />
                </div>
                {errors.contactNumber && <p>请输入联系人电话</p>}
              </div>
              <div className={styles.infoItem}>
                <label className={styles.title}>联系邮箱：</label>
                <div className={styles.itemInputBox}>
                  <input placeholder="在此处输入联系邮箱"  {...register('contactEmail', { required: true })} />
                </div>
                {errors.contactEmail && <p>请输入联系邮箱</p>}
              </div>
              <div className={styles.infoItem}>
                <label className={styles.title}>企业网址：</label>
                <div className={styles.itemInputBox}>
                  <input placeholder="在此处输入企业网址"  {...register('website', { required: true })} />
                </div>
                {errors.website && <p>请输入企业网址</p>}
              </div>
              <div className={styles.infoItem}>
                <label className={styles.title}>企业微信：</label>
                <div className={styles.itemInputBox}>
                  <textarea placeholder="在此处输入企业微信"  {...register('weixin')} />
                </div>
                {errors.weixin && <p>请输入企业微信</p>}
              </div>
              <div className={styles.infoItem}>
                <label className={styles.title}>系统联系人姓名：</label>
                <div className={styles.itemInputBox}>
                  <input placeholder="在此处输入系统联系人姓名"  {...register('systemContact')} />
                </div>
                {errors.systemContact && <p>请输入系统联系人姓名</p>}
              </div>
              <div className={styles.infoItem}>
                <label className={styles.title}>系统联系人电话：</label>
                <div className={styles.itemInputBox}>
                  <input placeholder="在此处输入系统联系人电话"  {...register('systemContactNumber', { required: true })} />
                </div>
                {errors.systemContactNumber && <p>请输入系统联系人电话</p>}
              </div>
              <div className={styles.infoItem}>
                <label className={styles.title}>企业介绍：</label>
                <div className={styles.intoNotice}>* 企业介绍内容，请至展商管理后台编辑 </div>
              </div>

            </div>

            <div className={`${styles.btnList} ${styles.flewRow}`}>
              <div className={`${styles.editBtn} ${styles.cancelBtn}`} onClick={() => {
                setIsEdit(false)
              }}>取消</div>
              <button className={styles.editBtn} type="submit" >保存</button>
            </div>
          </form>
        </div>}
      </div>
    </div>
  );
}

export default Index;
